<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<script type="text/javascript" src="${basePath}/static/js/util.js"></script>
<link href="${basePath}/static/css/Catalog/CatalogManage.css" rel="stylesheet" type="text/css">
<div class="file_manage">
    <div class="file_title">
    	<c:if test="${not empty hospitalizationNotes }">
    		<h3>${hospitalizationNotes[0].name}&nbsp;&nbsp;${hospitalizationNotes[0].id_number}&nbsp;&nbsp;<fmt:formatDate value="${hospitalizationNotes[0].out_hospital_date}" pattern="yyyy-MM-dd"/> ${hospitalizationNotes[0].treatment_type_name}&nbsp;&nbsp;</h3>
    	</c:if>
        <input type="hidden" id="firstGuidHidden" value="${param.firstGuid }">
        <ul style="width:90px;">
            <!--<li><a>类型</a></li>-->
            <!--<li><a>保存</a></li>-->
            <li><a onclick="custom_close()" id="closeBtn2">关闭</a></li>
        </ul>
    </div>
    <div class="fileContent clearfix">
        <div class="fileContent-left">
            <div class="file_header">
                <div class="left">文件信息</div>
              <!--   <div class="right">未编页 &nbsp;<span id="unPaginationSpan">0</span></div> -->
            </div>
        <!--<h4 style="height:35px;line-height: 35px;width:965px;margin:0 0 5px;background:#e3e5e4;padding-left:25px;">文件对照信息</h4>-->
            <div class="filePage" id="filepage">
                <ul>
                	<c:forEach var="scanFile" items="${scanFiles }" varStatus="status">
                		<c:choose>
               				<c:when test="${not empty scanFile.mr_page_type_id}">
               					<li style="border-color: green" data-index="${scanFile.mr_page_type_id }" data-filename="${scanFile.mr_page_type_id }" file-hash="${ scanFile.fileHash}" mr-page_type_id ="${ scanFile.mr_page_type_id}">
                					<img src="${scanFile.markPicUrl}" alt=""/>
		                			<%-- <img src="${hospitalizationNoteResourceUrl}${scanFile.fileUrl}${scanFile.fileName}" alt=""/> --%>
		                		</li>
		                	</c:when>
               				<c:otherwise>
               					<li data-filename="0" data-index="10000" file-hash="${ scanFile.fileHash}">
                					<img src="${scanFile.markPicUrl}" alt=""/>
		                			<%-- <img src="${hospitalizationNoteResourceUrl}${scanFile.fileUrl}${scanFile.fileName}" alt=""/> --%>
		                		</li>
               				</c:otherwise>
               			</c:choose>
                	</c:forEach>  
                </ul>
            </div>
        </div>
        <div class="file_menu">
        <h3>病案图片查看</h3>
        <ul class="clearfix" id="menulist">
        	<c:forEach var="mrPageType" items="${mrPageTypes}" varStatus="status">
            	<li class="file_li" id="m3_${mrPageType.id }" page-type-id="${mrPageType.id }" data-filename="${mrPageType.id }">
	            	<a>${mrPageType.name }
		            	<span id="mrpagetype${mrPageType.id}">
							<c:choose>
								<c:when test="${not empty mrPageTypesOfPaginationMap[mrPageType.id]}">
									${mrPageTypesOfPaginationMap[mrPageType.id].pagination_count}
								</c:when>
								<c:otherwise>0</c:otherwise>
							</c:choose>
						</span>
					</a>
				</li>
            </c:forEach>
            
        </ul>
    </div>
    </div>
</div>
<script>
	function sort_li(a, b){
        return Number($(b).attr('data-index')) < Number($(a).attr('data-index')) ? 1 : -1;    //升序排列
    }
   /*  $("#filepage li").sort(sort_li) // sort elements   JS的sort()方法
            .appendTo('#filepage'); */
	$(function(){
	//获取图片列表
    var filepage=$("#filepage li");
    filepage.sort(sort_li)
            .appendTo('#filepage ul');
    
    //获取编目菜单列表
    var menulist=$("#menulist li");
    //获取未编页图片列表
    var unPaginationFile=$("#filepage li[data-filename='0']");
    $("#unPaginationSpan").html(unPaginationFile.length);
    //定义未点击的图片
//    var filename,menuname;
    //点击图片列表
    $.each(filepage,function(i,item){
        $(item).on("click",function(){
            $(this).css("border-color","red").siblings().css("border-color","#ccc");//当前活动图片加红色边框,其他兄弟边框还是默认灰色
           // $(this).css("border-color","green");//加绿色边框
           $(this).siblings("[mr-page_type_id]").css("border-color","green");
           var checkedImages = $("#filepage li[checked='checked']");
           for ( var int = 0; int < checkedImages.length; int++) {
			
			}
            filepage.removeAttr("checked");
           	$(this).attr("checked","checked");
           	$("#menulist li").css("background","#F7F8F8");
           	var mr_page_type_id =$(this).attr("mr-page_type_id");
           	$("#menulist li[page-type-id='"+mr_page_type_id+"']").css("background","#FEC99C");

//            filename=$(this).attr("data-filename")
        })
    })
    //点击菜单绑定列表
    $.each(menulist,function(i,item){
        $(item).on("click",function(){
          $(this).css("background","#FEC99C").siblings().css("background","#F7F8F8");//当前活动菜单加橘黄色背景，其他的还是默认灰色背景
          
          var checkedImage = $("#filepage li[checked='checked']");
         /*  if(checkedImage.length != 0){
          	var currentImage = checkedImage.get(0);
          	var firstguid = $("#firstGuidHidden").val();
          	checkedImage.css("border-color","green"); */
         	//var mrpagetypeid =  $(this).attr("page-type-id");
         	//var filehash = currentImage.getAttribute("file-hash");
         	//var oldmrpagetypeid = currentImage.getAttribute("mr-page_type_id");
         	
         	/* $.ajax({
				type:"post",
				url:"${basePath}/medrecord/paginationMedrecordImage",
				data:{firstGuid:firstguid,fileHash:filehash, mrPageTypeId:mrpagetypeid,oldMrPageTypeId:oldmrpagetypeid},
				success:function(data){
					if(data!=null && data.success == true){
						
						var mrpagetypeObj = data.data[mrpagetypeid];
						if(mrpagetypeObj != null){
							$("#mrpagetype"+mrpagetypeid).html(mrpagetypeObj.pagination_count);
						}else{
							$("#mrpagetype"+mrpagetypeid).html("0");
						}
						if(oldmrpagetypeid != null){
						
							var oldmrpagetypeObj = data.data[oldmrpagetypeid];
							if(oldmrpagetypeObj != null){
								$("#mrpagetype"+oldmrpagetypeid).html(oldmrpagetypeObj.pagination_count);
							}else{
								$("#mrpagetype"+oldmrpagetypeid).html("0");
							}
						}
						currentImage.setAttribute("mr-page_type_id",""+mrpagetypeid);
						currentImage.setAttribute("data-filename",""+mrpagetypeid);
						currentImage.setAttribute("data-index",""+mrpagetypeid);
						checkedImage.removeAttr("checked");
						checkedImage.css("border-color","green");
						var unPaginationFile=$("#filepage li[data-filename='0']");
				    	$("#unPaginationSpan").html(unPaginationFile.length);
				    	$("#filepage ul li").sort(sort_li).appendTo('#filepage ul');
					}else{
						alert("病案编页失败！");
					}
					
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					 alert(XMLHttpRequest.status);
					 alert(XMLHttpRequest.readyState);
					 alert(textStatus);
				}
			});  */
          	
         /*  }
          else{ */
          	 var menuname=$(this).attr("data-filename");

          	 var current_index = 0;
			 $.each(filepage,function(i,item){
				
                /*判断li中data-filename是否跟menuname一样*/
                if($(item).attr("data-filename")==menuname){
                	if(current_index == 0){
                		/*获取该标签距离顶部的高度*/
	                    var $objTop=$(item)[0].offsetTop;
	                    /*获取文件图片第一个li的offsetTop*/
	                    var $firstTop=$(filepage).get(0).offsetTop;
	                    /*当前li要滚动的总高度*/
	                    var h=$objTop-$firstTop;
	                    $(".filePage").animate({
	                     scrollTop: h
	                     },500);
	                     current_index = 1;
                	}
                }
            })
          /* } */
        });
    });
	});
    
</script>